<template>
  <ul :class='classList'>
    <li v-for="item in getListData" v-if="item.show" @click="routerTo(item)">
      <router-link :to="item.url" :class="{'box-size':true,'active':item.active}">
        <img :src="item.img" alt="hh">
        <p>{{item.label}}</p>
      </router-link>
    </li>

    <p style="display:none">{{getFootActive}}</p>
  </ul>
</template>
<script>
export default {
  props:["className"],
  name: "",
  data() {
    return {
      classList:{
        "common-foot":true,
        "pa":true,
        "box-size":true,
      },
      defaultData:[
        {
          show:true,
          label:"首页",//名称
          img:null,
          imgs:{
            default:require('../../assets/img/hpmepage/menu1.png'),//图片地址
            active:require('../../assets/img/hpmepage/menu1-1.png'),
          },
          url:"/",//路由地址
          active:true,
        },{
          show:true,
          label:"会员",//名称
          img:null,
          imgs:{
            default:require('../../assets/img/hpmepage/menu2.png'),//图片地址
            active:require('../../assets/img/hpmepage/menu2-1.png'),
          },
          url:"/members",//路由地址
          active:false,
        },{
          show:true,
          label:"更多",//名称
          img:null,
          imgs:{
            default:require('../../assets/img/hpmepage/menu3.png'),//图片地址
            active:require('../../assets/img/hpmepage/menu3-1.png'),
          },
          url:"/more",//路由地址
          active:false,
        },{
          show:true,
          label:"工作台",//名称
          img:null,
          imgs:{
            default:require('../../assets/img/hpmepage/menu4.png'),//图片地址
            active:require('../../assets/img/hpmepage/menu4-1.png'),
          },
          url:"/works",//路由地址
          active:false,
        }
      ],

      path:"",
      settime:""
    };
  },
  computed:{
    getListData(){
      for(var key in this.className||{}){
        this.classList[key]=this.className[key]
      }
      for(var item of this.defaultData){
        item.img=item.imgs[item.active?"active":"default"]
      }
      return this.defaultData
    },

    getFootActive(){
      this.getActive()
      return this.$store.state.path
    }
  },
  methods: {
    routerTo(item){
      for(var one of this.defaultData){
        one.active=false
      }
      this.$set(item,"active",true)
    },

    getActive(){
      this.defaultData.forEach((ele,index)=>{
        ele.active=index==0
        if(ele.url==this.$store.state.path){
          ele.active=true
          this.defaultData[0].active=false
        }
      })
    }
  },
  created() {
    // 验证权限 不为0 的时候为员工
    this.settime = setInterval(()=>{
      this.defaultData[3].show=TESTUSER||sessionStorage.getItem("isUser")>0?true:false
      if(this.defaultData[3].show)clearInterval(this.settime)
    },100)
    setTimeout(()=>{
      clearInterval(this.settime)
    },60000)
  },
};
</script>
<style lang="scss" scoped>
.common-foot{
  height: 50px;
  width: 100%;
  bottom: 0;
  background-color: #F2F2F1;
  display: flex;
  
  li{
    width: 0;
    height: 100%;
    flex-grow: 1;

    a{
      display: inline-block;
      text-align: center;
      width: 100%;
      height: 100%;
      padding: 7px 0 5px;
      color: #666;
    }
    a.active{
      color: #F39519
    }
    
    p{
      margin-top: 4px;
      font-size: 11px;
    }

    img{
      max-width: 23px;
      height: 20px;
      margin: 0 auto;
    }
  }
}
.common-foot::before{
  position:absolute;
  content: "";
  width: 100%;
  border-top: 1px solid #DBDBDB;
}
</style>